<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今天吃什么 | 抽签助手</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-utensils"></i> 今天吃什么</h1>
            <p class="subtitle">让命运来决定你的美食选择</p>
        </header>

        <main>
            <!-- 额外功能区 -->
            <div class="extra-features">
                <button id="import-csv-btn" class="feature-btn">
                    <i class="fas fa-file-import"></i> 导入CSV
                </button>
                <button id="compare-btn" class="feature-btn">
                   <i class="fas fa-chart-bar"></i> 数据对比
                </button>
                <a href="milktea-price-comparison.html" class="feature-btn">
                   <i class="fas fa-coffee"></i> 奶茶对比
                </a>
                <input type="file" id="csv-file-input" accept=".csv" class="hidden">
             </div>

            <!-- 分类选择 -->
            <div class="category-selection">
                <h2>选择餐类</h2>
                <div class="categories">
                    <button class="category-btn active" data-category="breakfast">早餐</button>
                    <button class="category-btn" data-category="lunch">午餐</button>
                    <button class="category-btn" data-category="dinner">晚餐</button>
                    <button class="category-btn" data-category="milktea">奶茶</button>
                    <button class="category-btn" data-category="supper">夜宵</button>
                </div>
            </div>

            <!-- 抽签区域 -->
            <div class="drawing-area">
                <div class="drawing-box">
                    <div id="food-result" class="food-result">点击抽签</div>
                    <button id="draw-btn" class="draw-btn">
                        <i class="fas fa-random"></i> 开始抽签
                    </button>
                </div>
            </div>

            <!-- 美食图片展示 -->
            <div class="image-gallery">
                <div class="gallery-header">
                    <h2><i class="fas fa-images"></i> 美食灵感</h2>
                    <p class="gallery-subtitle">浏览这些美食图片，获取今天的用餐灵感</p>
                </div>
                <div class="gallery-grid">
                    <div class="gallery-item">
                        <img src="OIP-C.webp" alt="美食图片" class="gallery-image">
                    </div>
                    <div class="gallery-item">
                        <img src="微信图片_20251014194323_260_3.png" alt="美食图片" class="gallery-image">
                    </div>
                    <div class="gallery-item">
                        <img src="微信图片_20251014194330_261_3.png" alt="美食图片" class="gallery-image">
                    </div>
                    <div class="gallery-item">
                        <img src="微信图片_20251014194336_262_3.png" alt="美食图片" class="gallery-image">
                    </div>
                    <div class="gallery-item">
                        <img src="微信图片_20251014194346_263_3.png" alt="美食图片" class="gallery-image">
                    </div>
                    <div class="gallery-item">
                        <img src="微信图片_20251014194354_264_3.png" alt="美食图片" class="gallery-image">
                    </div>
                    <div class="gallery-item">
                        <img src="微信图片_20251014194402_265_3.png" alt="美食图片" class="gallery-image">
                    </div>
                    <div class="gallery-item">
                        <img src="微信图片_20251014194416_266_3.png" alt="美食图片" class="gallery-image">
                    </div>
                </div>
            </div>

            <!-- 历史记录 -->
            <div class="history-section">
                <div class="section-header">
                    <h2>历史记录</h2>
                    <button id="clear-history" class="clear-btn">
                        <i class="fas fa-trash-alt"></i> 清空
                    </button>
                </div>
                <div id="history-list" class="history-list">
                    <p class="no-history">暂无记录</p>
                </div>
            </div>

            <!-- 食物管理 -->
            <div class="food-management">
                <div class="section-header">
                    <h2>食物管理</h2>
                    <button id="add-food-toggle" class="add-btn">
                        <i class="fas fa-plus"></i> 添加
                    </button>
                </div>
                <div id="add-food-form" class="add-food-form hidden">
                    <input type="text" id="new-food-name" placeholder="输入食物名称">
                    <select id="new-food-category">
                        <option value="breakfast">早餐</option>
                        <option value="lunch">午餐</option>
                        <option value="dinner">晚餐</option>
                        <option value="milktea">奶茶</option>
                        <option value="supper">夜宵</option>
                    </select>
                    <button id="add-food-btn" class="confirm-btn">确认添加</button>
                </div>
                <div id="food-list" class="food-list">
                    <!-- 食物列表将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 感想模态框 -->
            <div id="thought-modal" class="modal hidden">
                <div class="modal-content">
                    <span id="close-modal" class="close-btn">&times;</span>
                    <h3>记录感想</h3>
                    <p>你抽到了: <span id="modal-food-name"></span></p>
                    <textarea id="food-thought" placeholder="分享你的用餐体验..."></textarea>
                    <button id="save-thought-btn" class="confirm-btn">保存感想</button>
                </div>
            </div>

            <!-- 对比界面模态框 -->
            <div id="compare-modal" class="modal hidden">
                <div class="modal-content compare-content">
                    <span id="close-compare-modal" class="close-btn">&times;</span>
                    <h3>数据对比分析</h3>
                    <div class="compare-controls">
                        <div class="compare-options">
                            <label>
                                <input type="radio" name="compare-type" value="category" checked> 分类对比
                            </label>
                            <label>
                                <input type="radio" name="compare-type" value="food"> 食物对比
                            </label>
                        </div>
                        <div class="compare-category-selection" id="compare-category-selection">
                            <h4>选择要对比的分类:</h4>
                            <div class="compare-categories"></div>
                        </div>
                        <div class="compare-food-selection hidden" id="compare-food-selection">
                            <h4>选择要对比的食物:</h4>
                            <div class="compare-foods"></div>
                        </div>
                    </div>
                    <div class="compare-results">
                        <div id="compare-chart-container">
                            <canvas id="compare-chart"></canvas>
                        </div>
                        <div class="compare-stats"></div>
                    </div>
                </div>
            </div>
        </main>

        <footer>
            <p>&copy; 2023 今天吃什么抽签助手 | 让每一餐都充满惊喜</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>